<template>
  <div class="app-container">

    <el-tabs tab-position="left" style="min-height: 400px;margin-top: 20px;margin-left: 20px" >
      <el-tab-pane label="订单设置">
        <el-row>
          <el-col :span="8" >
            <el-form ref="orderSettingForm" :model="orderSettingForm" :rules="rules" label-width="200px">
              <el-form-item label="最大未支付订单数" prop="maxUnpaid">
                <el-input-number style="width: 100%" v-model="orderSettingForm.maxUnpaid" :min="3" placeholder="请输入最大未支付订单数" />
              </el-form-item>
              <el-form-item label="未支付订单失效时间(分钟)" prop="orderFailureTime">
                <el-input-number style="width: 100%" v-model="orderSettingForm.orderFailureTime" :min="30" placeholder="" />
              </el-form-item>
              <el-form-item label="自动收货时间(天)" prop="receivingDays">
                <el-input-number style="width: 100%" v-model="orderSettingForm.receivingDays" :min="7" placeholder="" />
              </el-form-item>
              <el-form-item label="退货关闭时间(天)" prop="returnDays">
                <el-input-number style="width: 100%" v-model="orderSettingForm.returnDays"  placeholder="" />
              </el-form-item>
              <el-form-item label="换货关闭时间(天)" prop="exchangeDays">
                <el-input-number style="width: 100%" v-model="orderSettingForm.exchangeDays"  placeholder="" />
              </el-form-item>
              <el-form-item label="退货收件人" prop="receiver">
                <el-input v-model="orderSettingForm.receiver" placeholder="请输入退件收货人" />
              </el-form-item>
              <el-form-item label="收件人电话" prop="phone">
                <el-input v-model="orderSettingForm.phone" placeholder="请输入退件收件人电话" />
              </el-form-item>
              <el-col :span="24">
                <el-form-item label="退货地区"  prop="areaArray">
                  <el-cascader
                    style="width: 100%"
                    size="large"
                    :options="regionData"
                    v-model="orderSettingForm.areaArray"
                    @change="handleCascaderChange">
                  </el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="详细地址" prop="address">
                  <el-input type="textarea"  :rows="2" v-model="orderSettingForm.address" placeholder="请输入详细地址" />
                </el-form-item>
              </el-col>
            </el-form>
            <div style="margin-left: 49%">
              <el-button type="primary" @click="submitOrderSettingForm">确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="积分设置">
        <el-row>
          <el-col :span="8">
            <el-form ref="integralSettingForm" :model="integralSettingForm" :rules="integralRules" label-width="160px">
              <el-form-item label="启用积分">
                <el-switch
                  v-model="integralSettingForm.status"
                  active-value="0"
                  inactive-value="1"
                  @change="handleIntegraStatusChange(integralSettingForm)"
                ></el-switch>
              </el-form-item>
              <el-divider content-position="center">积分获取</el-divider>
              <el-form-item label="新用户赠送积分" prop="newUserGive">
                <el-input-number :min="0" v-model="integralSettingForm.newUserGive" placeholder="请输入新用户赠送积分" />
              </el-form-item>
              <el-form-item label="客户每消费" prop="obtain">
                <el-input-number :min="1" v-model="integralSettingForm.obtain"/>元送1积分
              </el-form-item>
              <el-divider content-position="center">积分抵现</el-divider>
              <el-form-item label="抵现规则" prop="deduction">
                <el-input-number :min="1" v-model="integralSettingForm.deduction" />积分抵现1元
              </el-form-item>
              <el-form-item label="订单积分抵扣数量限制">
                <el-radio-group v-model="integralSettingForm.deductionLimit">
                  <el-radio  label="0">不限制</el-radio>
                  <el-radio  label="1">限制</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="integralSettingForm.deductionLimit==1" label="每个订单最多可用" prop="limitQuantity">
                <el-input-number :min="0" v-model="integralSettingForm.limitQuantity" />积分
              </el-form-item>
              <el-divider content-position="center">积分清零</el-divider>
              <el-form-item label="积分清零方式">
                <el-radio-group v-model="integralSettingForm.reset">
                  <el-radio  label="0">不清零</el-radio>
                  <el-radio  label="1">每个自然年清零</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="客户每消费" prop="obtain">
                <el-input-number :min="1" v-model="integralSettingForm.obtain"/>元送1积分
              </el-form-item>
              <el-form-item label="积分说明" prop="instruction">
                <el-input type="textarea"  :rows="3"  v-model="integralSettingForm.instruction"/>
              </el-form-item>
            </el-form>
            <div style="margin-left: 40%">
              <el-button type="primary" @click="submitIntegralSettingForm">确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="自提设置">
        <el-row>
          <el-col :span="8" >
            <el-form ref="pickupSettingForm" :model="pickupSettingForm" :rules="pickupRules" label-width="150px">
              <el-form-item label="启用自提">
                <el-switch
                  v-model="pickupSettingForm.status"
                  active-value="0"
                  inactive-value="1"
                  @change="handlePickupStatusChange(pickupSettingForm)"
                ></el-switch>
              </el-form-item>
              <el-form-item label="联系人" prop="contacts">
                <el-input v-model="pickupSettingForm.contacts" placeholder="请输入联系人" />
              </el-form-item>
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="pickupSettingForm.phone" placeholder="请输入联系电话" />
              </el-form-item>
              <el-form-item label="地区" prop="areaArray">
                <el-cascader
                  style="width: 100%"
                  size="large"
                  :options="regionData"
                  v-model="pickupSettingForm.areaArray"
                  @change="handlePickupCascaderChange">
                </el-cascader>
              </el-form-item>
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="pickupSettingForm.address" placeholder="请输入详细地址" />
              </el-form-item>
            </el-form>
            <div style="margin-left: 49%">
              <el-button type="primary" @click="submitPickupSettingForm">确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { regionData,CodeToText,TextToCode  } from 'element-china-area-data'
import {getOrderSetting, updateOrderSetting} from "../../../api/order/orderSetting";
import {
  changeIntegralSettingStatus,
  getIntegralSetting,
  updateIntegralSetting
} from "../../../api/market/integralSetting";
import {changePickupSettingStatus, getPickupSetting, updatePickupSetting} from "../../../api/wechat/pickupSetting";

export default {
  name: "storesetting",
  components: {

  },
  data() {
    return {
// 表单参数
      orderSettingForm: {},
      regionData:regionData,
      integralSettingForm: {},
      pickupSettingForm: {},
      // 表单校验
      rules: {
        extAppid: [
          { required: true, message: "商户ID不能为空", trigger: "blur" }
        ],
        maxUnpaid: [
          { required: true, message: "最大未支付订单数不能为空", trigger: "blur" }
        ],
        orderFailureTime: [
          { required: true, message: "未支付订单失效时间，单位是分钟不能为空", trigger: "blur" }
        ],
        receivingDays: [
          { required: true, message: "自动收货时间不能为空", trigger: "blur" }
        ],
        returnDays: [
          { required: true, message: "退货关闭时间不能为空", trigger: "blur" }
        ],
        exchangeDays: [
          { required: true, message: "换货关闭时间不能为空", trigger: "blur" }
        ],
        receiver: [
          { required: true, message: "退件收货人不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "退件收件人电话不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "退件地址不能为空", trigger: "blur" }
        ],
        areaArray: [
          { required: true, message: "地区不能为空", trigger: ["change" ]}
        ],
      },
      // 表单校验
      integralRules: {
        status: [
          { required: true, message: "积分管理状态", trigger: "blur" }
        ],
        newUserGive: [
          { required: true, message: "新用户赠送积分不能为空", trigger: "blur" }
        ],
        obtain: [
          { required: true, message: "客户每消费N元赠送1积分不能为空", trigger: "blur" }
        ],
        deduction: [
          { required: true, message: "N积分抵扣1元不能为空", trigger: "blur" }
        ],
        deductionLimit: [
          { required: true, message: "订单积分抵扣数量限制不能为空", trigger: "blur" }
        ],
        limitQuantity: [
          { required: true, message: "每个订单积分抵扣限制数量不能为空", trigger: "blur" }
        ],
        reset: [
          { required: true, message: "积分清零方式不能为空", trigger: "blur" }
        ]
      },
      // 表单校验
      pickupRules: {
        contacts: [
          { required: true, message: "联系人不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "是否开启自提：0为开启，1为关闭不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "详细地址不能为空", trigger: "blur" }
        ],
        areaArray: [
          { required: true, message: "地区不能为空", trigger: ["change" ]}
        ],
      }
    };
  },
  created() {
    this.handleGetOrderSetting();
    this.handleGetIntegralSetting();
    this.handleGetPickupSetting();
  },
  methods: {

    /** 订单设置 */
    handleGetOrderSetting() {
      //this.reset();
      getOrderSetting().then(response => {
        this.orderSettingForm = response.data;
        let that =this;
        if(this.orderSettingForm.region){
          this.orderSettingForm.areaArray=[]
          this.orderSettingForm.region.forEach(item =>{
            that.orderSettingForm.areaArray.push(item.value)
          })
        }
      });
    },
    handleCascaderChange(){
      let aa =[]
      this.orderSettingForm.areaArray.forEach(item =>{
        const ab = {
          value:item,
          label:CodeToText[item]
        }
        aa.push(ab)
      })
      this.orderSettingForm.region = aa;
    },
    handlePickupCascaderChange(){
      let aa =[]
      this.pickupSettingForm.areaArray.forEach(item =>{
        const ab = {
          value:item,
          label:CodeToText[item]
        }
        aa.push(ab)
      })
      this.pickupSettingForm.region = aa;
    },
    submitOrderSettingForm(){
      this.$refs["orderSettingForm"].validate(valid => {
        if (valid) {
          if (this.orderSettingForm.id != null) {
            updateOrderSetting(this.orderSettingForm).then(response => {
              this.msgSuccess("修改成功");
              this.handleGetOrderSetting();
            });
          }
        }
      });
    },
    /** 积分设置 */
    handleGetIntegralSetting() {
      getIntegralSetting().then(response => {
        this.integralSettingForm = response.data;
      });
    },
    handleIntegraStatusChange(row){
      this.$refs["integralSettingForm"].validate(valid => {
        if (valid) {
           updateIntegralSetting(this.integralSettingForm).then(response => {
             let text = row.status === "0" ? "启用" : "停用";
             this.$confirm('确认要"' + text + '"积分设置吗?', "警告", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
             }).then(function() {
               return changeIntegralSettingStatus(row.id, row.status);
             }).then(() => {
               this.msgSuccess(text + "成功");
             }).catch(function() {
               row.status = row.status === "0" ? "1" : "0";
             });
            });
        }else {
          row.status = row.status === "0" ? "1" : "0";
        }
      });
    },
    submitIntegralSettingForm(){
      this.$refs["integralSettingForm"].validate(valid => {
        if (valid) {
          if (this.integralSettingForm.id != null) {
            updateIntegralSetting(this.integralSettingForm).then(response => {
              this.msgSuccess("修改成功");
              this.handleGetIntegralSetting();
            });
          }
        }
      });
    },
    /** 自提设置 */
    handleGetPickupSetting() {
      getPickupSetting().then(response =>{
        this.pickupSettingForm = response.data;
        let that =this;
        if(this.pickupSettingForm.region){
          this.pickupSettingForm.areaArray=[]
          this.pickupSettingForm.region.forEach(item =>{
            that.pickupSettingForm.areaArray.push(item.value)
          })
        }
      })
    },
    submitPickupSettingForm(){
      this.$refs["pickupSettingForm"].validate(valid => {
        if (valid) {
          if (this.pickupSettingForm.id != null) {
            updatePickupSetting(this.pickupSettingForm).then(response => {
              this.msgSuccess("修改成功");
              this.handleGetPickupSetting();
            });
          }
        }
      });
    },
    handlePickupStatusChange(row){
      this.$refs["pickupSettingForm"].validate(valid => {
        if (valid) {
          updatePickupSetting(this.pickupSettingForm).then(response => {
            let text = row.status === "0" ? "启用" : "停用";
            this.$confirm('确认要"' + text + '"自提设置吗?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              return changePickupSettingStatus(row.id, row.status);
            }).then(() => {
              this.msgSuccess(text + "成功");
            }).catch(function() {
              row.status = row.status === "0" ? "1" : "0";
            });
          });
        }else {
          row.status = row.status === "0" ? "1" : "0";
        }
      });
    }
  }
};
</script>
